<template>
  <Container class="mt-128 py-16 border-1 border-dashed border-b-gray-800 w-full">
    <h2 class="text-24 text-center mb-12">Category: <span class="font-bold">{{ category.slug }}</span></h2>
    <div class="text-16">{{ category.seo }}</div>
  </Container>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
import { BlogGateway } from '@/database/blog/blog.gateway';
import Container from '@/components/ui/Container.vue';

export default defineComponent({
  components: {
    Container,
  },

  props: {
    category: {
      type: Object as any,
      required: true
    }
  },

  async getStaticPaths() {
    const categories = await BlogGateway.getCategories();

    return categories.map((category) => ({
      params: { category: category.slug },
      props: { category }
    }));
  }
});
</script>
